<template>
  <div>
    <Header
      :currentCity="currentCity"
      :cityList="cityList"
      :phone="phone"
      @closeChange="subscribeCar"
    ></Header>
    <Crumb :crumbListData="crumbListData"></Crumb>
    <div class="content-row">
      <div class="banner-row">
        <img
          src="https://s1.ax1x.com/2022/12/28/pSSQ6Ld.png"
        />
      </div>
      <div class="fill-row">
        <div class="fill-notice">
          <div class="fill-notice-price">人均节省看房费用{{ costNum }}元</div>
          <div class="fill-notice-time">人均节省看房时间{{ timeNum }}分钟</div>
        </div>
        <div class="form-row">
          <div class="form-inline">
            <label class="form-label">您的称呼</label>
            <div class="form-item">
              <el-radio v-model="sexRadio" label="女士">女士</el-radio>
              <el-radio v-model="sexRadio" label="先生">先生</el-radio>
            </div>
          </div>
          <div class="form-inline">
            <label class="form-label">预约看房时间</label>
            <div class="form-item">
              <el-date-picker
                v-model="houseViewingDate"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                placeholder="选择日期"
                :editable="false"
                style="width: 260px"
              ></el-date-picker>
            </div>
          </div>
          <div class="form-inline">
            <label class="form-label">您的联系方式</label>
            <div class="form-item">
              <el-input
                type="text"
                placeholder="请输入您的手机号"
                v-model="phone"
                maxlength="11"
                show-word-limit
                style="width: 260px"
              ></el-input>
            </div>
          </div>
          <div class="form-inline" v-if="smsState">
            <label class="form-label">验证码</label>
            <div class="form-item">
              <el-input
                type="text"
                placeholder="请输入验证码"
                v-model="code"
                maxlength="6"
                style="width: 260px"
              ></el-input>
              <el-button class="code-btn" @click="subCode" :disabled="codeDisabled">{{ codeText }}</el-button>
            </div>
          </div>
          <div class="form-inline" style="margin-bottom: 0">
            <label class="form-label">&nbsp;</label>
            <div class="form-item">
              <el-button type="danger" :disabled="subscribeDisabled" @click="subscribe">预约免费专车看房</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer :currentCity="currentCity"></Footer>
    <!-- 订阅成功 -->
    <el-dialog
      width="280px"
      custom-class="Subscription-notification"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="SubscriptionSuess"
    >
      <div class="Subscription_Suess">
        <h3>{{ popupTitle }}</h3>
        <p>{{ popupDesc }}</p>
        <div class="Subscription_phone">
          <el-button class="Subscription_Dingyue_submit" @click="SubscriptionSuess = false">知道了</el-button>
        </div>
      </div>
      <div slot="footer" class="Subscription_Dingyue_fooetr">
        <p>Tips：稍后将电话联系您，请保持手机通畅。为保障您的服务体验，通话过程将会有录音</p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
var head = {
  title: '',
  content: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务',
  keywords: '✖✖✖✖✖✖✖✖✖✖_专为买房人服务',
}
import u from '@/plugins/Ccom'
export default {
  head() {
    return {
      title: head.title,
      meta: [
        { name: 'description', content: head.content },
        { name: 'keywords', content: head.keywords },
      ],
      link: [{ rel: 'stylesheet', href: '/css/mfzc.css' }],
    }
  },
  async asyncData(ctx) {
    var prefixUrl = ctx.prefixUrl
    var currentCity = ctx.currentCity
    var cityList = ctx.cityList
    var smsState = ctx.smsState
    var estateId = ctx.params.id ? ctx.params.id.split('.')[0] || '' : ''
    var crumbListData = []
    var costNum = 88888
    var timeNum = 88888
    var houseName = ''
    // 修改页面SEO
    head.title = `免费专车看房-${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`
    // 获取楼盘信息
    if (estateId) {
      var getHosueInfo = await u.http({
        url: '/pc/houseDetail/queryHouseInfoDetailById',
        params: {
          estateId,
          userId: '',
        },
      })
      if (getHosueInfo.code == 200) {
        houseName = getHosueInfo.data.houseInfoDetail.name
      }
    }
    // 修改栏目信息
    crumbListData = [
      {
        title: `${currentCity.cityName}✖✖✖✖✖✖✖✖✖✖`,
        href: prefixUrl,
      },
      {
        title: '免费专车',
        href: '',
      },
    ]
    // 看房参数
    let getHouseViewing = await u.http({
      url: '/app/amentOrder/queryShowHouseData',
    })
    if (getHouseViewing.code == 200) {
      costNum = getHouseViewing.data.showingMoney
      timeNum = getHouseViewing.data.showingTime
    }

    return {
      prefixUrl,
      currentCity,
      cityList,
      smsState,
      estateId,
      houseName,
      crumbListData,
      costNum,
      timeNum,
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      sexRadio: '女士',
      houseViewingDate: '',
      subscribeDisabled: false,
      SubscriptionSuess: false,
      phone: '',
      code: '',
      codeText: '获取验证码',
      codeDisabled: false,
      loadTime: 60,
      popupTitle: '提交成功',
      popupDesc:
        '您已成功预约，稍后楼盘管家将联系您了解需求，为您定制专属置业报告。',
    }
  },
  mounted() {
    this.phone = localStorage.getItem('userInfo')
      ? JSON.parse(localStorage.getItem('userInfo')).mobile
      : ''
  },
  methods: {
    // 触发验证码按钮
    subCode() {
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      var t = this.loadTime
      this.codeDisabled = true
      this.codeText = `${t}s重新获取`
      var clearLoadTime = setInterval((e) => {
        t--
        this.codeText = `${t}s重新获取`
        if (t < 1) {
          clearInterval(clearLoadTime)
          t = this.loadTime
          this.codeText = '重新获取'
          this.codeDisabled = false
        }
      }, 1000)
      this.getCode()
    },
    // 获取验证码
    getCode() {
      u.http({
        client: true,
        url: '/app/sms/loginCode',
        params: {
          phone: this.phone,
          countryCode: '86',
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          return
        }
      })
    },
    // 预约免费专车看房
    subscribe() {
      if (this.houseViewingDate == '') {
        this.$message({
          message: '请选择看房时间',
          type: 'warning',
        })
        return false
      }
      if (this.phone == '') {
        this.$message({
          message: '请输入您的手机号',
          type: 'warning',
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请输入正确手机号',
          type: 'warning',
        })
        return false
      }
      if (this.smsState) {
        if (this.code == '') {
          this.$message({
            message: '请输入验证码',
            type: 'warning',
          })
          return false
        }
        this.validateCode()
        return false
      }
      this.subscribeCar()
    },
    // 验证手机号
    validateCode() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/user/login',
        params: {
          type: 2,
          phone: this.phone,
          code: this.code,
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
          return false
        }
        this.subscribeCar()
      })
    },
    // 预约专车
    subscribeCar() {
      this.subscribeDisabled = true
      u.http({
        client: true,
        url: '/app/visitRecord/addVisitRecordByNoToken',
        params: {
          clickType: 9,
          phone: this.phone,
          amentTime: this.houseViewingDate,
          houseName: this.houseName,
          estateId: this.estateId,
          // amentCall: this.sexRadio,
          // amentHouseName: this.amentHouseName,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.SubscriptionSuess = true
          setTimeout((e) => {
            this.subscribeDisabled = false
          }, 1000)
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
          this.subscribeDisabled = false
        }
      })
    },
  },
}
</script>